<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>my chat</title>
    <style>
        /* Fix user-agent */

        * {
            box-sizing: border-box;
        }

        html {
            font-family: "HelveticaNeue-Light",
            "Helvetica Neue Light",
            "Helvetica Neue",
            Helvetica,
            Arial,
            "Lucida Grande",
            sans-serif;
            font-weight: 300;
            -webkit-font-smoothing: antialiased;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        /* Pages */

        .pages {
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .page {
            height: 100%;
            position: absolute;
            width: 100%;
        }

        /* Login Page */

        .login.page {
            background-color: #000;
        }

        .login.page .form {
            height: 100px;
            margin-top: -100px;
            position: absolute;

            text-align: center;
            top: 50%;
            width: 100%;
        }

        .login.page .form .usernameInput {
            background-color: transparent;
            border: none;
            border-bottom: 2px solid #fff;
            outline: none;
            padding-bottom: 15px;
            text-align: center;
            width: 400px;
        }

        .login.page .title {
            font-size: 200%;
        }

        .login.page .usernameInput {
            font-size: 200%;
            letter-spacing: 3px;
        }

        .login.page .title, .login.page .usernameInput {
            color: #fff;
            font-weight: 100;
        }

        /*Chat page */

        .chat.page {
            display: none;
        }

        /* Font */

        .messages {
            font-size: 150%;
        }

        .inputMessage {
            font-size: 100%;
        }

        .log {
            color: gray;
            font-size: 70%;
            margin: 5px;
            text-align: center;
        }

        /* Messages */

        .chatArea {
            height: 100%;
            padding-bottom: 60px;
        }

        .messages {
            height: 100%;
            margin: 0;
            overflow-y: scroll;
            padding: 10px 20px 10px 20px;
        }

        .message.typing .messageBody {
            color: gray;
        }

        .username {
            float: left;
            font-weight: 700;
            overflow: hidden;
            padding-right: 15px;
            text-align: right;
        }

        /* Input */

        .inputMessage {
            border: 10px solid #000;
            bottom: 0;
            height: 60px;
            left: 0;
            outline: none;
            padding-left: 10px;
            position: absolute;
            right: 0;
            width: 100%;
        }

    </style>
    <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="application/javascript">

        var COLORS = [
            '#e21400', '#91580f', '#f8a700', '#f78b00',
            '#58dc00', '#287b00', '#a8f07a', '#4ae8c4',
            '#3b88eb', '#3824aa', '#a700ff', '#d300e7'
        ];

        var socket = io();

        socket.on('messages', function (msg) {
            var mess = msg.split(":");
            showMsg(mess[0],msg.split(mess[0] + ":")[1]);
            if (document.hidden) {
                notify(mess[0], msg.split(mess[0] + ":")[1]);
            }
        });

        socket.on('log', function (msg) {
            log(msg);
        });

        window.onbeforeunload = function(e){
            socket.emit('logoff',$('#username').val());
        }


        $(function () {
            $('.usernameInput').bind('keypress', function (event) {
                if (event.keyCode == "13") {
                    $('.chat.page').css("display", "inline");
                    $('.login.page').css("display", "none");
                    $('#username').val($('.usernameInput').val());
                    socket.emit('login',$('.usernameInput').val());
                }
            });
            $('.inputMessage').bind('keypress', function (event) {
                if (event.keyCode == "13") {
                    socket.emit('chat message', $('#username').val() + ":" + $('.inputMessage').val());
                    $('.inputMessage').val('');
                }
            });
        });

        function showMsg(name,msg) {

            var $usernameDiv = $('<span class="username"/>').text(name).css('color', getUsernameColor(name));
            var $messageBodyDiv = $('<span class="messageBody">').text(msg);

            var $messageDiv = $('<li class="message"/>').data('username', name).append($usernameDiv, $messageBodyDiv);

            $('.messages').append($messageDiv);
        }

        function log (message) {
            var $el = $('<li>').addClass('log').text(message);
            $('.messages').append($el);
        }

        function getUsernameColor (username) {
            // Compute hash code
            var hash = 7;
            for (var i = 0; i < username.length; i++) {
                hash = username.charCodeAt(i) + (hash << 5) - hash;
            }
            // Calculate color
            var index = Math.abs(hash % COLORS.length);
            return COLORS[index];
        }

        function notify(title, content) {

            if (!title && !content) {
                title = "桌面提醒";
                content = "您看到此条信息桌面提醒设置成功";
            }
            var iconUrl = "/images/send_ok.png";

            if (window.webkitNotifications) {
                //chrome老版本
                if (window.webkitNotifications.checkPermission() == 0) {
                    var notif = window.webkitNotifications.createNotification(iconUrl, title, content);
                    notif.display = function () {
                    }
                    notif.onerror = function () {
                    }
                    notif.onclose = function () {
                    }
                    notif.onclick = function () {
                        this.cancel();
                    }
                    notif.replaceId = 'Meteoric';
                    notif.show();
                } else {
                    window.webkitNotifications.requestPermission($jy.notify);
                }
            }
            else if ("Notification" in window) {
                // 判断是否有权限
                if (Notification.permission === "granted") {
                    var notification = new Notification(title, {
                        "icon": iconUrl,
                        "body": content,
                    });
                }
                //如果没权限，则请求权限
                else if (Notification.permission !== 'denied') {
                    Notification.requestPermission(function (permission) {
                        // Whatever the user answers, we make sure we store the
                        // information
                        if (!('permission' in Notification)) {
                            Notification.permission = permission;
                        }
                        //如果接受请求
                        if (permission === "granted") {
                            var notification = new Notification(title, {
                                "icon": iconUrl,
                                "body": content,
                            });
                        }
                    });
                }
            }
        }
    </script>
</head>
<body>
<ul class="pages">
    <li class="chat page">
        <div class="chatArea">
            <ul class="messages">

            </ul>
        </div>
        <input class="inputMessage" placeholder="Type here..."/>
    </li>
    <li class="login page">
        <div class="form">
            <h3 class="title">告诉我你的名字？</h3>
            <input class="usernameInput" type="text" maxlength="14"/>
        </div>
    </li>
</ul>
<input type="hidden" id="username" name="username"/>
</body>
</html>